/**
 * 系统管理  系统环境变量
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通讯录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">

      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.userCodeOrName" placeholder="请输入用户编码或姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-upload2" @click="exportList">导出全部</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" height="500" highlight-current-row v-loading="loading" element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="index" width="55">
      </el-table-column>
      <el-table-column prop="userCode" label="编码">
      </el-table-column>
      <el-table-column prop="userName" label="姓名">
      </el-table-column>
      <el-table-column prop="departmentName" label="部门">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="telephone" label="座机">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import {Get, Post} from "../../api/axiosFun";
export default {
  data() {
    return {
      loading: false, //是显示加载
      formInline: {
        pageIndex: 0,
        pageSize: 10,
        userCodeOrName: ''
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  watch: {},

  /**
   * 创建完毕
   */

  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */

  methods: {
    // 获取数据方法
    getdata(parameter) {
      this.loading = true
      Get("/officeSystem/user/selectByCondition", parameter)
        .then(result => {
          this.loading = false;
          this.listData = result.data.resultList;
          this.pageparm.total = result.data.totalCount;
        })

    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageIndex = parm.currentPage - 1;
      this.formInline.pageSize = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.varId = row.varId
        this.editForm.varLable = row.varLable
        this.editForm.varName = row.varName
        this.editForm.varValue = row.varValue
      } else {
        this.title = '添加'
        this.editForm.varId = ''
        this.editForm.varLable = ''
        this.editForm.varName = ''
        this.editForm.varValue = ''
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    },
    //导出通讯录
    exportList(){
      this.$axios.post(
        '/officeSystem/user/export',//请求的url
        this.formInline,//请求数据
        {
          responseType:'blob'//服务器返回的数据类型
        }
      ).then((res)=>{
        //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
        //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
        //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
        const content = res.data
        const blob = new Blob([content])//构造一个blob对象来处理数据
        const fileName = 'XX公司通讯录.xls'

        //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
        //IE10以上支持blob但是依然不支持download
        if ('download' in document.createElement('a')) { //支持a标签download的浏览器
          const link = document.createElement('a')//创建a标签
          link.download = fileName//a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()//执行下载
          URL.revokeObjectURL(link.href) //释放url
          document.body.removeChild(link)//释放标签
        } else { //其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }

      }).catch((err)=>{
        console.log(err);
      })
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

